<template>
    <div class="search-bar relative aspect-[4/1] w-full overflow-hidden">
        <video class="absolute inset-0 -z-50 object-cover" src="@/assets/earth_v6.mp4" muted autoplay></video>
        <div class="search-bar-content flex h-full w-full flex-col items-center justify-center">
            <h1 class="mb-10 text-6xl font-bold text-white">今日头条</h1>
            <a-input-search
                placeholder="请输入搜索内容"
                v-model:value="value"
                size="large"
                @search="onSearch"
                class="search-bar-input h-12 w-1/2 outline-none hidden"
            ></a-input-search>
        </div>
    </div>
</template>

<script setup lang="ts">
const value = ref("");
const onSearch = (searchValue: string) => {
    console.log("use value", searchValue);
    console.log("or use this.value", value.value);
};
</script>

<style scoped lang="scss"></style>
